<template>
    <div class="tag-container">
        <div v-for="(tag, index) in localValueList" :key="tag+index" :style="{'margin-bottom': gutter+'px', 'margin-right': gutter+'px'}">
            <el-tag :closable="!disabled" :disable-transitions="false" class="custom-tag" @close="handleClose(index)">{{ tag }}</el-tag>
        </div>
        <div v-if="!disabled" v-show="localValueList.length < max">
            <el-date-picker v-if="type === 'date'" v-show="inputVisible" ref="saveTagDate" v-model="inputValue" type="month" placeholder="" class="input-new-tag" value-format="yyyy年MM月" @change="handleInputConfirm" @blur="handleInputConfirm" />
            <el-input v-else v-show="inputVisible" ref="saveTagInput" v-model="inputValue" class="input-new-tag" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" />
            <el-button v-show="!inputVisible" class="button-new-tag" @click="showInput">+ {{ headLine }}</el-button>
        </div>
    </div>
</template>

<script>
/**
 * @desc 点击添加标签
 * headLine - 标题
 * disabled - 禁用
 * separator - 分隔符
 * max - 最大
 * v-model - 绑定数据
 * type - text | date:日期选择
 */
export default {
    name: 'TagInput',
    props: {
        value: {
            type: String,
            default: ''
        },
        gutter: {
            type: Number,
            default: 20 // 间隔 px
        },
        span: {
            type: Number,
            default: 6 // 分栏 1/24
        },
        max: {
            type: Number,
            default: 999 // 最大数量
        },
        disabled: {
            type: Boolean,
            default: false
        },
        headLine: {
            type: String,
            default: ''
        },
        separator: {
            type: String,
            default: ';'
        },
        type: {
            type: String,
            default: 'text' // date
        }
    },
    data: function() {
        return {
            localValue: '',
            inputValue: '',
            inputVisible: false
        }
    },
    computed: {
        localValueList() {
            return this.localValue ? this.localValue.split(this.separator) : []
        }
    },
    watch: {
        value() {
            this.localValue = this.value;
        },
        localValue(val) {
            this.$emit('input', val);
        }
    },
    created() {
        this.localValue = this.value;
    },
    methods: {
        handleClose(index) {
            const labelList = this.localValue ? this.localValue.split(this.separator) : []
            labelList.splice(index, 1);
            this.localValue = labelList.join(this.separator)
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(() => {
                if (this.type === 'date') {
                    this.$refs.saveTagDate.focus();
                } else {
                    this.$refs.saveTagInput.$refs.input.focus();
                }
            });
        },

        handleInputConfirm() {
            const inputValue = this.inputValue;
            const labelList = this.localValue ? this.localValue.split(this.separator) : []
            if (inputValue) {
                labelList.push(inputValue)
            }
            this.localValue = labelList.join(this.separator)
            this.inputVisible = false;
            this.inputValue = '';
        }
    }
}
</script>

<style lang="scss" scoped>
.tag-container {
    display: flex;
    flex-wrap: wrap;
    .custom-tag {
        display: inline-flex;
        align-items: center;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        text-align: center;
    }
}
</style>
